<template>
    <!-- :class="props.color" -->
    <div class="tag-container" >
        <div class="tag" :class="{
            'blue': tagText === '题',
            'red': tagText === '资',
            'more': tagText === '课',
        }">{{ tagText }}</div>
        <!-- <div class="angle">
            
        </div> -->
    </div>
</template>

<script setup>


const props = defineProps({
    tag: {
        type: String,
        default: 'tag'
    },
    color:{
        type: String,
        default: 'blue'
    },
    index:{
        type: Number,
        default: 0
    }
})
const tagMap={
    '刷题练习':'题',
    '精华资料':'资',
}
const tagText=computed(()=>{
    if(props.tag){
        return tagMap[props.tag]
    }
})

</script>
<style>
.tag {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;

    background-image: url('@/assets/images/Rectangle 34625515 (1).png');
    background-size: 100%;
    
}
.blue .tag{
    /* background: linear-gradient(135deg, #45F5CD, #1386F7); */
    background: linear-gradient(to right, #45F5CD, #1386F7);
}
.red .tag{
    /* background: linear-gradient(135deg, #45F5CD, #1386F7); */
    background: linear-gradient(to right, #FF8010, #FF571F);
}
.more .tag{
    /* background: linear-gradient(135deg, #45F5CD, #1386F7); */
    background: linear-gradient(to right, #6EEF69, #F95FF3);
}
.angle{
    box-sizing: content-box;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid;
    border-bottom: 10px solid transparent;
    border-image-slice: 100 0;
    border-image-width: 20px 0 0;
    border-image-repeat: repeat;
}

.blue .angle {
    border-image-source: conic-gradient(#2FC4E0 0deg, #1386F7 45deg,
            transparent 45deg 315deg, #45F5CD 315deg, #2FC4E0 360deg);
}
.red .angle {
    border-image-source: conic-gradient(#FF6A18 0deg, #FF571F 45deg,
            transparent 45deg 315deg, #FF8010 315deg, #FF6A18 360deg);
}
.more .angle {
    border-image-source: conic-gradient(#B8A3B3 0deg, #F95FF3 45deg,
            transparent 45deg 315deg, #6EEF69 315deg, #B8A3B3 360deg);
}

.blue.tag{
    background-image: url('@/assets/images/Rectangle 34625515.png');
}
.red.tag{
    background-image: url('@/assets/images/Rectangle 34625515 (1).png');
}
.more.tag{
    background-image: url('@/assets/images/Rectangle 34625515 (2).png');
}
</style>